<template>
  <div>
    <el-upload
      class="uploadBox"
      action="#"
      :auto-upload="false"
      :show-file-list="false"
      :on-change="handleChange"
    >
      <div>
        <video
          v-if="srcUrl"
          class="video"
          :src="srcUrl"
          controls="controls"
        ></video>
      </div>

      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
  </div>
</template>

<script>
export default {
  name: "MvCloudgateTerminalUploadPicture",
  props: {
    videoUrl: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // srcUrl: this.videoUrl ? process.env.VUE_APP_BASE_URL + this.videoUrl : "",
      srcUrl: "",
    };
  },
  watch: {
    videoUrl: function (nVal, oVal) {
      if (this.srcUrl.indexOf("http:") != -1) {
        return;
      }
      this.srcUrl = process.env.VUE_APP_BASE_URL + nVal;
      // console.log(this.srcUrl);
    },
  },
  mounted() {
    if (this.videoUrl) {
      if (this.srcUrl.indexOf("http:") != -1) {
        return;
      } else {
        this.srcUrl = process.env.VUE_APP_BASE_URL + this.videoUrl;
      }
    }
  },

  methods: {
    handleChange(file, fileList) {
      console.log(file);
      const { size, type } = file.raw;
      if (type != "video/mp4") {
        this.$message.error("上传视频只能是 MP4 格式!");
        return false;
      }

      this.srcUrl = URL.createObjectURL(file.raw);
      this.$emit("onVideoChange", file);
    },
  },
};
</script>

<style lang="scss" scoped>
.uploadBox {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.video {
  display: inline-block;
  width: 400px;
  height: 300px;
}
</style>
